{% extends 'base_dashboard.html' %}

{% block title %}Exam session — {{ course.title }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-7">
    <div class="card border-0 shadow-sm rounded-4 p-4 text-center">
      <div class="display-6 text-primary mb-2"><i class="bi bi-window-fullscreen"></i></div>
      <h4 class="fw-bold">Secure exam session</h4>
      <p class="text-muted mb-3">{{ course.title }}</p>
      <ul class="list-unstyled small text-muted text-start mx-auto mb-4" style="max-width:26rem;">
        <li class="mb-2">• Opens in a <strong>dedicated window</strong> (one question at a time).</li>
        <li class="mb-2">• After practice, the real exam goes <strong>full screen</strong> with a {{ course.duration_minutes }}-minute timer.</li>
        <li class="mb-2">• Leaving the tab or exiting full screen is <strong>logged</strong>. After {{ flag_threshold }} tab switches the attempt is flagged for staff review — it is <strong>not</strong> auto-failed.</li>
        <li class="mb-2">• Copy/paste and browser back are blocked as a deterrent.</li>
        <li class="mb-2">• Timer expiry auto-submits whatever you have answered.</li>
      </ul>

      <button type="button" class="btn btn-success btn-lg w-100 fw-semibold" id="open-exam-btn">
        Open exam window
      </button>
      <p class="small text-muted mt-3 mb-0" id="launch-status">
        Allow pop-ups for this site if the window does not open.
      </p>
      <a href="{% url 'courses:course_detail' slug=course.slug %}" class="btn btn-link mt-3">Back to course</a>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
  var url = "{{ take_exam_url|escapejs }}";
  var name = "tsn_course_exam_{{ attempt.pk }}";
  var btn = document.getElementById('open-exam-btn');
  var status = document.getElementById('launch-status');

  function openSession() {
    var w = window.open(url, name, 'noopener=yes,noreferrer=yes');
    if (w) {
      try { w.focus(); } catch (e) {}
      status.textContent = 'Exam window opened. Keep this page open to return to the course.';
      btn.textContent = 'Re-open exam window';
    } else {
      status.textContent = 'Pop-up blocked. Click again after allowing pop-ups, or use the link below.';
      status.innerHTML += ' <a href="' + url + '" target="' + name + '" rel="noopener">Open exam</a>';
    }
  }

  btn.addEventListener('click', openSession);
  openSession();
})();
</script>
{% endblock %}